// 找图片
let image = $('#image')

// 剪裁区域的配置项
let option = {
  // 剪裁比例
  aspectRatio : 1,

  // 指定区域 预览的区域
  preview : '.img-preview'
}

// 调用方法 初始化
image.cropper(option)

// 点击上传 按钮
$('#up').on('click', function () {
  // 自触发file文件域
  $('#file').trigger('click')
})

// 选择图片更换头像 监控file文件域的图片变化
$('#file').on('change', function () {
  // 获取图片的url
  // console.log(this.files)
  // this.files.length > 0 说明有图片
  if (this.files.length > 0) {
    // 获取图片的url
    let fileObj = this.files[0]
    // console.log(fileObj)
    // 将图片的url地址获取
    let url = URL.createObjectURL(fileObj)
    // console.log(url)

    // 利用插件自带的方法 更换图片
    image.cropper('replace', url)
  }
})

// 点击确定按钮 上传
$('#sure').on('click', function () {
  // 得到剪裁完的图片
  let canvas = image.cropper('getCroppedCanvas', {
    windth : 30,
    height : 30
  })

  // 转成base64格式
  let base64 = canvas.toDataURL()

  // 提交服务器
  axios.post('/my/user/avatar', `avatar=${encodeURIComponent(base64)}`).then(res => {
    let {status, message} = res.data
    if (status === 0) {
      // 更换成功弹出消息
      layer.msg(message)
      // 更换欢迎语句的头像
      window.parent.getUser()
    }
  })
})